<template>
  <div class="user-edit">
    <div class="head-block">
      <img :src="baseURL+info.userInfo.faceUrl" alt="" class="user-img">
      <div class="head-info">
        <div class="head-item">
          <div class="info-name">ID：{{ info.userInfo.id }}</div>
          <div class="info-name">昵称：{{ info.userInfo.name }}</div>
          <div class="phone">电话号：{{ info.userInfo.phone }}</div>
          <div class="phone">邀请码：{{ info.userInfo.invitationCode }}</div>
        </div>
        <div class="address">{{ info.userInfo.province }}-{{ info.userInfo.city }}-{{ info.userInfo.area }}</div>
        <div class="address">{{ info.userInfo.createTime }}</div>
        <div class="inviter">上级邀请人:
          <template v-if="info.supUserInfo!=null&&info.supUserInfo!=''">{{ info.supUserInfo.name }} /
            {{ info.supUserInfo.phone }}
          </template>
          <template v-else>暂无</template>
        </div>
      </div>
    </div>
    <div class="info-block">
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="title-item">
            <div class="title">益联券</div>
            <div class="more" @click="openEdit(1)">查看明细</div>
          </div>
          <el-card shadow="hover" class="box-card">
            <div class="info-item">
              <div class="name">可用余额</div>
              <div class="info">{{ info.voucher }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <div class="title-item">
            <div class="title">积分</div>
            <div class="more" @click="openEdit(2)">查看明细</div>
          </div>
          <el-card shadow="hover" class="box-card">
            <div class="info-item">
              <div class="name">可用积分</div>
              <div class="info">{{ info.integral }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="title-item">
            <div class="title">提成益联券</div>
            <div class="more" @click="openEdit(3)">查看明细</div>
          </div>
          <el-card shadow="hover" class="box-card">
            <div class="info-item">
              <div class="name">当前佣金</div>
              <div class="info">{{ info.voucherVip }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <div class="title-item">
            <div class="title">抵用金</div>
            <div class="more" @click="openEdit(4)">查看明细</div>
          </div>
          <el-card shadow="hover" class="box-card">
            <div class="info-item">
              <div class="name">当前抵用金</div>
              <div class="info">{{ info.deductionAmount }}</div>
            </div>
          </el-card>
        </el-col>
        <!--      <el-col :span="12">-->
        <!--        <div class="title">积分</div>-->
        <!--        <el-card shadow="always">-->
        <!--          鼠标悬浮时显示-->
        <!--        </el-card>-->
        <!--      </el-col>-->
      </el-row>
    </div>
    <el-dialog
        :visible.sync="editDialog.show"
        title="明细"
        destroy-on-close
        :close-on-click-modal="false"
        width="1200px"
        :modal="false"
    >
      <userList
          v-if="editDialog.show"
          :id="editDialog.id"
          :type="editDialog.type"
          @hideEditDialog="hideEditDialog"
          ref="editForm"
      />
    </el-dialog>
  </div>
</template>

<script>
import {getUserVoucherById} from "@/api/user";
import userList from './userList'

export default {
  components: {userList},
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      formLoading: false,
      info: {
        voucher: 0,
        integral: 0,
        voucherVip: 0,
        deductionAmount: 0,
        supUserInfo: {},
        userInfo: {
          faceUrl: '',
          phone: '',
          invitationCode: '',
          province: '',
          city: '',
          area: '',
          createTime: ''
        }
      },
      baseURL: '',
      editDialog: {
        show: false,
        id: null,
        type: null
      },
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    }
    this.baseURL = process.env.VUE_APP_IMAGE_URL
  },
  methods: {
    openEdit(type) {
      this.editDialog.id = this.id;
      this.editDialog.show = true;
      this.editDialog.type = type;
    },
    getDetail() {
      this.formLoading = true
      getUserVoucherById({userid: this.id}).then(res => {
        this.info = res
      }).finally(() => {
        this.formLoading = false;
      })
    },
    close() {
      this.$emit('hideUserEditDialog')
    },
    hideEditDialog() {
      this.editDialog.show = false
    },
  }
}
</script>

<style scoped lang="scss">
.user-edit {
  .head-block {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 20px;

    .user-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 15px;
    }

    .head-info {
      .head-item {
        display: flex;
        align-items: center;

        .info-name {
          margin-right: 20px;
        }

        .phone {
          margin-right: 20px;
        }
      }

      .address {
        margin-top: 10px;
      }

      .inviter {
        margin-top: 10px;
      }
    }
  }

  .info-block {
    .title-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 15px;
      margin-bottom: 10px;

      .title {
        font-size: 16px;
      }

      .more {
        font-size: 13px;
        color: #767676;
        cursor: pointer;
      }

      .more:hover {
        color: #409EFF;
      }
    }

    .box-card {
      background: #f0f0f0;
    }

    .info-item {
      width: calc((100% - 40px) / 3);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .name {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
